<template>
    <section class="box" style="border-left: 3px solid #409EFF;">
        <div>
            <div style="margin:0 30px;">
                <div class="demo-collapse">
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item :title="title" name="1">
                            <slot name="tableMap"></slot>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="table-responsive" data-pattern="priority-columns">
                                        <el-table :data="tableData" stripe style="width: 100%">
                                            <el-table-column
                                                v-for="column in tableColumns"
                                                :key="column.prop"
                                                :prop="column.prop"
                                                :label="column.label"
                                            />
                                        </el-table>
                                    </div>
                                </div>
                            </div>

                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        tableData: {
            type: Array,
            required: true
        },
        tableColumns: {
            type: Array,
            required: true
        },
        title: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            activeNames: ['1']

        }
    }
}
</script>
<style>
@import "@/views/personalCenter/css/index.css";
</style>